<template>
    <div class="channel-list">
        <Card style="padding:16px;">
            <Row class="search-form">
                <Col span="20">
                <Form :model="formItem" inline :label-width="100">
                    <FormItem label="通知标题：">
                        <Input v-model.trim="formItem.title"
                               clearable
                               placeholder="请输入"
                               :maxlength="20"
                               class="formItemStyle"
                        />
                    </FormItem>
                </Form>
                </Col>
                <Col span="4" style="text-align: right">
                  <Button @click="searchInfo" class="tablePageBtnStyle" type="primary">查询</Button>
                </Col>
            </Row>


            <Row class="search-result">
                <Col span="0">

                </Col>
                <Col span="24" style="text-align: right">
                <Button @click="addNotice" class="tablePageBtnStyle" type="primary">+新建通知</Button>
                </Col>
            </Row>

            <VTable :init='columns'
                    :defaultValue="defaultVal"
                    :pages='true'
                    :filt='filt'
                    @changed="tableCall"
                    :loading="loading"></VTable>


            <!-- 添加通知 -->
            <Modal v-model="addNoticeModal"
                   width="800"
                   title="添加通知"
                   :mask-closable="false">
                <div>
                    <Form ref="addNoticeFormRef" :model="addNoticeForm"
                          :rules="ruleValidate" :label-width="100" class="channelBulid-form-back">
                        <FormItem label="通知标题" prop="title">
                            <Input v-model.trim="addNoticeForm.title" class="itemsStyle" placeholder="最多可输入25字" maxlength="25"></Input>
                        </FormItem>
                    </Form>
                    <div>
                         <textarea class='tinymce-textarea' id="tinymceEditerNote"></textarea>
                        <Spin fix v-if="spinShow">
                            <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                            <div>加载组件中...</div>
                        </Spin>
                    </div>
                </div>
                <div slot="footer">
                    <Button type="primary" @click='addNoticeBtn'>确认</Button>
                    <Button @click="addNoticeModal = false">取消</Button>
                </div>
            </Modal>
        </Card>
        <Modal
                v-model="deleteModel"
                title=""
                :loading="loading"
                @on-ok="okBtn">
            <p>确定删除</p>
        </Modal>
    </div>
</template>

<script>

    import tinymce from 'tinymce';
	import systemApi from '../../api/api'
	import fetchList from '../../api/fetchList'
	import dateFormat from '../../tool/date'
	import codeManage from '../../api/statusCodeManage';
	import validator from '../../tool/validator';
	import Cookies from 'js-cookie';
	

	export default {
		name: 'personList',
		data() {
			return {
                addNoticeModal:false,
				distributionModal: false,//产品分配模态框
                spinShow:true,
				loading: false,
                deleteModel:false,
                currMainId:null,
				formItem: {
					merName:''
				},
                addNoticeForm:{
                    title:null,
                    context:null
                },
                editPersonModal:false,
                editPersonForm:{
				   id:0,
                   title:null,
                   phone:null,
                   deptId:null
                },
				listStyle: {
					width: '350px',
					height: '300px'
				},
				columns: {
					url: 'allAPI.getNoticeList',
					cols: [
						{
							title: '序号',
                            type: 'index',
							align: 'center',
							width: 80
						},
						{
							title: '标题',
							align: 'center',
							key: 'title',
							width: 200
						},
						{
							title: '阅读人数',
							align: 'center',
							key: 'readCount',
							width: 120
						},
						{
							title: '发布时间',
							align: 'center',
							key: 'addTime',
							width: 200,
                            render:function (h,params) {
                                return dateFormat(params.row.addTime,'YYYY-MM-DD 星期E HH:mm')
                            }
						},
						{
							title: ' '
						},
						{
							title: '操作',
							key: 'action',
							width: 150,
							fixed: 'right',
							align: 'center',
							render: (h, params) => {
								return h('div', [
									h('a', {
										style: {
											color: '#2d8cf0',
											marginRight: '13px'
										},
										on: {
											click: () => {
											    this.deleteModel = true;
											    this.currMainId = params.row.id;
											}
										}
									}, '删除'),
									h('a', {
										style: {
											color: '#2d8cf0',
											marginRight: '13px'
										},
										on: {
											click: () => {
//												this.editChannel(params.row);
                                                this.$router.push({name:'noticeDetail',query:{id:params.row.id}})
											}
										}
									}, '查看')
								])
							}

						}
					]
				},

				defaultVal: {    //固定参数  初始化默认参数  page和rows 不需要传递
                    title:'',
					pageNo: 1,
                    pageSize: 20
				},
				filt: {},
                ruleValidate:{
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'}
                    ]
                },
				totalNumber: '',   // 更新查询结果 总条数
				totalNumber: 0, // 总数据条数
				pageLimitNum: 20, // 每页限制的条数

				currentPage: 1
			};

		},

		methods: {
            //新建消息窗口
            addNotice() {
                this.$refs.addNoticeFormRef.resetFields();
                this.addNoticeModal = true;
            },
            okBtn(){
                let _this = this;
                systemApi.allAPI.deleteNoteById({id:_this.currMainId}).then(
                    res => {
                        if (res.code == 0) {
                            this.$Message.success('删除成功');
                            this.filt = {...this.defaultVal};
                        }else{
                            this.$Message.success('删除失败');
                        }
                    },
                    err => {
                        codeManage.showTipOfStatuCode(err, this);
                 });
            },
			// 显示查询结果集总条数
			tableCall(par) {
				// 表格查询后的回调函数
				this.totalNumber = par;
			},
			changeLimitSize(pageSize) {
				// 每页显示条数的改变
				this.pageLimitNum = pageSize;
			},
			changePage(page) {
				// 当前页改变
				this.currentPage = page;
			},
            // 添加通知接口
            addNoticeBtn(){
			    let _this = this;
                this.$refs.addNoticeFormRef.validate((valid) => {
                    if (valid) {
                        let detailContent = tinymce.get('tinymceEditerNote').getContent();
                        if (detailContent === '' || detailContent == null || detailContent === '<!DOCTYPE html>\n' + '<html>\n' +
                            '<head>\n' + '</head>\n' + '<body>\n' + '\n' + '</body>\n' + '</html>') {
                            this.$Message.error('请输入通知');
                            return;
                        }
                        _this.addNoticeForm.context = detailContent;
                        let _par = {...this.addNoticeForm};

                        systemApi.allAPI.addNote(_par).then(
                            res => {
                                if (res.code == 0) {
                                    this.$Message.success('添加成功');
                                    this.filt = {...this.defaultVal};
                                    this.addNoticeModal = false;
                                    this.addNoticeForm.title = '';
                                    tinymce.get('tinymceEditerNote').setContent('');

                                }
                            },
                            err => {
                                codeManage.showTipOfStatuCode(err, this);
                        })
                    }else{

                    }

                })
            },
            // 编辑人员接口
            editPersonBtn(){
                let _this = this;
                this.$refs.editPersonRef.validate((valid) => {
                    if (valid) {
                        let _par = {};
                        _par.id = _this.editPersonForm.id;
                        _par.title = _this.editPersonForm.title;
                        _par.deptId = _this.editPersonForm.deptId;

                        systemApi.allAPI.editPerson(_par).then(
                            res => {
                                if (res.errorCode === 0) {
                                    this.$Message.success(_this.buildmodal.merName+'编辑成功');
                                }
                            },
                            err => {
                                codeManage.showTipOfStatuCode(err, this);
                            })
                    }else{

                    }

                })
            },

			//删除人员
            deletePersonById(id) {
                systemApi.allAPI.deletePerson({id:id}).then(
                    res => {
                        if (res.code == 0) {
                            this.$Message.success('删除成功');
                            this.filt = {...this.defaultVal};
                        }else{
                            this.$Message.error('删除失败');
                        }
                    },
                    err => {
                        codeManage.showTipOfStatuCode(err, this);
                    })
			},
			//编辑人员初始化
			editChannel(item) {
                this.editPersonModal = true;
                this.$refs.editPersonRef.resetFields();
                this.editPersonForm = item;
                this.editPersonForm.deptId = item.deptId+"";
			},
			//查询
			searchInfo() {
				let _searchName = this.formItem.title;
                this.filt = {title : _searchName};
			},
            intPage(){
                let _this = this;
			    systemApi.allAPI.getDepList({}).then(
			        res =>{
                        if(res.code == 0){
                            this.maintainList = res.data;
                        }else{

                        }
                    },
                    error => {

                    }
                );
                this.$nextTick( ()=>{
                    tinymce.init({
                        selector: '#tinymceEditerNote',
                        branding: false,
                        elementpath: false,
                        height: 400,
                        language: 'zh_CN.GB2312',
                        menubar: '',
                        plugins: [
                            'uploadimage print advlist autolink lists link image charmap  hr anchor pagebreak imagetools',
                            'searchreplace visualblocks visualchars code',
                            'insertdatetime media nonbreaking save table contextmenu directionality',
                            'emoticons paste textcolor colorpicker textpattern imagetools codesample'
                        ],
                        toolbar: 'undo redo ' +
                        '| insert | styleselect | forecolor backcolor bold italic ' +
                        '| alignleft aligncenter alignright alignjustify ' +
                        '| bullist numlist outdent indent | ' +
                        'uploadimage',
                        autosave_interval: '20s',
                        image_advtab: true,
                        table_default_styles: {
                            width: '100%',
                            borderCollapse: 'collapse'
                        },
                        setup: function (editor) {
                            editor.on('init', function (e) {
                                _this.spinShow = false;
                            });
                        }
                    });
                });

            }
		},
        created(){
		    this.intPage();
        }
	}
</script>


<style lang="less">

    @import "../../styles/main";

    .channel-list {

        padding: 16px;
        .itemsStyle{
            width: 250px;
        }
        .search-form {
            padding: 10px 0;
            height: 40px;
            background: white;

        }
        .search-result {
            padding: 0px 0;
        }

    }

    .channel-ivu-transfer {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 35px;
        margin-bottom: 35px;
        .ivu-modal {
            top: 0;
        }
    }


</style>